<template>
  <div>
		<n-descriptions
			label-placement="left"
			:title="props.item.subName"
			:column="2">
			<n-descriptions-item label="开始日期" :span="2">
				{{props.item.startDate}}
			</n-descriptions-item>
			<n-descriptions-item label="截止日期" :span="2">
				{{props.item.endDate}}
			</n-descriptions-item>
			<n-descriptions-item label="地点" :span="2">
				{{props.item.room}}
			</n-descriptions-item>
			<n-descriptions-item label="状态" :span="2">
				<n-tag v-if="props.item.active" size="small" type="success">进行中</n-tag>
				<n-tag v-else type="error" size="small" >已结束</n-tag>
			</n-descriptions-item>
		</n-descriptions>
		<n-flex style="margin-top: 20px">
			<template v-if="props.item.active">
				<n-button style="flex:1" type="success" size="small" @click="update">修改</n-button>
				<n-popconfirm
					positive-text="确认"
					negative-text="取消"
					@positive-click="end(0)">
					<template #trigger>
						<n-button style="flex:1" type="warning" size="small">结束</n-button>
					</template>
					确定要结束该班级课程吗？
				</n-popconfirm>
			</template>
			<n-popconfirm
				v-else
				@positive-click="end(1)"
				positive-text="确认"
				negative-text="取消">
				<template #trigger>
					<n-button style="flex:1" type="info" size="small">恢复</n-button>
				</template>
				确定要恢复该班级课程吗？
			</n-popconfirm>
		</n-flex>
  </div>
</template>

<script setup>
import { del } from '@/api/gradeApi'
const props = defineProps(['item'])
const emits = defineEmits(['getTableData', 'updateDialog'])
function end (active) {
	del(props.item.id, active, () => {
		emits('getTableData')
	})
}
function update () {
	emits('updateDialog', props.item.id)
}
</script>

<style scoped lang="scss">
.sub-name {
	font-size: 0.85rem;
	color: #9e9e9e;
}
</style>